<template>
  <div class="content">
  <!-- 标题  路由 -->
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div>
      <div class="Artloge" ><img :src="Loger"></div>
    </div>
    <!-- 提示信息 -->
    <div class="PromptInformation">
      提示：请输入您的个人信息和要查询的考试准考证号进行查询
    </div>
    <div class="Query">
      <p class="">姓&#12288;&#12288;&#12288;名：<input placeholder="请输入姓名"></p>
      <p class="">身&#12288;份&#12288;证：<input placeholder="请输入身份证号"></p>
      <p class="">准&#12288;考&#12288;证：<input placeholder="请输入准考证号"></p>
    </div>
    <div class="Select2" v-show="hidshow">
       <van-button type="info" class="btn" @click="select">查询</van-button>
      <div class="size">
          如有忘记准考证号请联系客服，电话：18798734568
      </div>
    </div>

  </div>
</template>

<script>

import NavBar from '@/components/navBar.vue'
import Loger from '../../assets/ArtLoge.png'
export default {
  data(){
    return{
      // 标题  路由
      title:'成绩查询',
      route:'/MyHome',
      Loger,
        docmentHeight: "0", //默认屏幕高度
        showHeight: "0", //实时屏幕高度
        hidshow: true, //显示或者隐藏footer
        isResize: false //默认屏幕高度是否已获取
    }

  },
  components:{
    NavBar,
  },
    //watch来监听屏幕变化
    watch: {
        showHeight: function() {
            console.log("Function:showHeight");
            //如果正常的高度大于变化后的高度，那么我们就隐藏下面的导航栏
            if (this.docmentHeight > this.showHeight) {
                this.hidshow = false;
            } else {
                this.hidshow = true;
            }
        }
    },

  methods:{
    select(){
     this.$router.push({path:'/AdmissionResults'})
    }
  },
    mounted() {
        //在mounted中首先获取正常情况下的屏幕高度
        if (!this.isResize) {
            // 默认屏幕高度
            this.docmentHeight = document.documentElement.clientHeight;
            this.isResize = true;
            console.log("docmentHeight=" + this.docmentHeight);
        }
        //在屏幕高度发生变化的时候获取屏幕高度
        window.onresize = () => {
            return (() => {
                // 实时屏幕高度
                this.showHeight = document.body.clientHeight;
                console.log("showHeight=" + this.showHeight);
            })();
        };
    },

}
</script>

<style  scoped>
.Artloge{
  text-align: center;
  margin-top: 48px;
}
.Artloge img{
  height: 150px;

}
.PromptInformation{
  color: rgba(128, 128, 128, 1);
	font-size: 10px;
  margin-left: 25px;
  text-align: left;
}
.Query{
  margin-left: 30px;
  margin-top: 44px;
}
.Query p{
  margin-top: 30px;
}
.Query p input{
  padding-left: 5px;
}
.Select2{
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;

  text-align: center;
}
.btn{
   margin-bottom: 10px;
   width: 80%;
  border: none;

}
.content{
 position: relative;
  height: 100%;
}
.size{
  color: rgba(80, 80, 80, 1);
	font-size: 12px;

  text-align: center;
}
</style>
